<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{margin: 0;padding: 0;font-family: "微软雅黑";color:#8d8d8d;word-wrap:break-word;font-size: 14px;}
			.commemt_user_img{height: 36px;width: 36px;position: relative;left: 8%;margin-top: 10px;border-radius:20px ;}
			.commemt_user_name{position: relative;margin-left: 10%;top: -22px;}
			.commemt_box{position: relative;padding:0 10% 0 22%;top: -20px;}
			.box_bottom{position: fixed;bottom: 0;width: 100%;padding: 8px;background-color: #eeeeee;}
			.comment{border: 1px solid#FF4081;border-radius: 14px;padding: 6px;width: 60%;}
			.comment_btn{position: relative;margin-bottom: -2.5%;height: 28px;width: 70px;}
			.box{position: relative;margin-top: 4px;}
		</style>
	</head>
	<body>
		<div class="comment_list">
			<span style="position: relative;margin-left: 8%;font-size: 16px;line-height: 26px;top: 8px;">
				评论：
			</span>
			
			<hr style="position: relative;top:6px;height:2px;border:none;border-top:1px solid #e1e1e1;width: 84%;" />
			
			<div class="box" >
				<div class="img_box">
					<img class="commemt_user_img" src="img/0.jpg"/>
					<span class="commemt_user_name" >Tom</span>
				</div>
				<div class="commemt_box">
					<span class="commemt_text" >测试测试测试测试测试测试</span>
				</div>
			</div>
			<div class="box" >
				<div class="img_box">
					<img class="commemt_user_img" src="img/0.jpg"/>
					<span class="commemt_user_name" >Joker</span>
				</div>
				<div class="commemt_box">
					<span class="commemt_text" >测试测试测试测试测试测试测试测试测试</span>
				</div>
			</div>
		</div>


		<br><br><br>

		
		<div class="box_bottom" align="center">
			<input type="text" class="comment" placeholder=" 写评论" />
			<input type="image" class="comment_btn" src="img/publish_btn.png"/>
		</div>
			
	</body>
	<script type="text/javascript">
			
			$(".comment_btn").click(function(){
				var m = $(".comment").val();
				var list = $(".comment_list");
				list.append("<div class='box'><div class='img_box'><img class='commemt_user_img' src='img/0.jpg'/><span class='commemt_user_name' >测试</span></div><div class='commemt_box'><span class='commemt_text' >"+m+"</span></div></div>")
			});
		
	</script>
</html>
